<template>
<div class="icons">

    <div class="icon">
        <div class="icon-img">
         <img  class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"/>
      </div>
      <p class="icon-desc">热门景点</p>
    </div>

    <div class="icon">
        <div class="icon-img">
         <img class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png"/>
        </div>
       <p class="icon-desc">故宫</p>
    </div>

    <div class="icon">
        <div class="icon-img">
           <img class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png"/>
       </div>
       <p class="icon-desc">北京必游</p>
    </div>

    <div class="icon">
        <div class="icon-img">
           <img class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png"/>
       </div>
       <p class="icon-desc">水上乐园</p>
    </div>

    <div class="icon">
        <div class="icon-img">
           <img class='icon-img-content' src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/0334cf5430b9b5505fd79e2b8d7e8670.png"/>
       </div>
       <p class="icon-desc">爬长城</p>
    </div>

    <div class="icon">
        <div class="icon-img">
           <img class='icon-img-content' src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"/>
      </div>
       <p class="icon-desc">北京欢乐谷</p>
    </div>

    <div class="icon">
        <div class="icon-img">
          <img class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png"/>
       </div>
       <p class="icon-desc">动植物园</p>
    </div>

    <div class="icon">
        <div class="icon-img">
           <img class='icon-img-content' src="http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png" />
         </div>
      <p class="icon-desc">北京野生动物园</p>
    </div>

</div>
</template>

<script>
export default{
    name:"HomeIcons",
}
</script>
<style lang="stylus" scoped>
.icons
  overfloat:hidden
  height:0
  padding-bottom:22%

  .icon 
    position:relative
    overfloat:hidden
    float:left
    width:25%
    height:0
    padding-bottom:10%

    .icon-img
      position:absolute
      top:0
      left:0
      right:0
      bottom 0rem
      padding:0rem
      margin:0rem

      .icon-img-content
        display:block
        margin:0 auto
        height:60%

    .icon-desc
       position:absolute
       left:0
       right:0
       bottom:0
       height 0.2rem
       line-height:.2rem
       text-align:center
     
</style>

